<!--
 * @Author: Betty
 * @Date: 2020-11-24 21:24:10
 * @LastEditors: Betty
 * @LastEditTime: 2021-01-31 23:36:38
 * @Description: 文章列表组件
-->
<template>
  <div class="post-list">
    <!-- 遍历传过来的文章数据，展示出里面的信息，如标题，图片，内容等 -->
    <!-- 注意把id改为_id，内容改为excerpt摘要 -->
    <article v-for="post in postList" :key="post._id" class="card mb-3 shadow-sm">
      <!-- 这里的链接跳转到文章详情页，to属性来指定链接，可以用标签模板字符串，但是外面的双引号不能丢 -->
      <div class="card-body">
        <router-link :to="`/post/${post._id}`">
          <h4>{{ post.title }}</h4>
        </router-link>
        <div class="row my-3 align-items-center">
          <!-- 在这里，用v-if做一个类型守卫 -->
          <div v-if="post.image && typeof post.image !== 'string'" class="col-3">
            <img :src="post.image.fitUrl" :alt="post.title" class="rounded-lg w-100" />
          </div>
          <p :class="{ 'col-9': post.image }">{{ post.excerpt }}</p>
        </div>
        <span class="text-muted">{{ post.createdAt }}</span>
      </div>
    </article>
  </div>
</template>

<script lang="ts">
import { computed, defineComponent, PropType } from 'vue'
// 注意，文章类型应该从store中拿来，因为store中的我们改过了
import { ImageProps, PostProps } from '../store'
import { generateFitUrl } from '../helper'

export default defineComponent({
  name: 'PostList',
  props: {
    list: {
      required: true,
      type: Array as PropType<PostProps[]>
    }
  },
  setup(props) {
    // 在里面使用计算属性，对文章列表里的文章图片进行缩放
    // 在里面对文章列表里的每一篇文章进行处理
    // 先判断是否有图片，如果有，则把图片缩放成指定大小，把修改后的文章数据返回到新数组
    // 最后返回处理后的文章列表
    const postList = computed(() => {
      return props.list.map((post) => {
        generateFitUrl(post.image as ImageProps, 200, 110, ['m_fill'])
        // 刚才犯的第一个错误是在里面忘记返回处理后的数据了，导致得到undefined数组
        return post
      })
    })
    // 在模板中遍历的是这个计算属性，
    // 刚才犯的第二个错是导出这里，是要把这个数据作为返回值的属性，而不是返回值
    return {
      postList
    }
  }
})
</script>
<style scoped>
  a {
    text-decoration: none;
  }
</style>